<!--
 * @Autor: dingxiaolin
 * @Date: 2021-10-13 16:10:53
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-11-13 19:22:50
-->
<template>
    <div id="salesChart"></div>
</template>

<script>
//七天内所有行政区监控药品销售统计
import echarts from 'echarts';
import { api } from '@/http/api';

export default {
    name: 'salesChart',
    components: {},
    computed: {},
    data() {
        return {};
    },
    mounted() {
        setTimeout(() => {
            this.drawChart();
        });
    },
    methods: {
        drawChart() {
            var salesChart = echarts.init(document.getElementById('salesChart'));
            window.addEventListener('resize', () => {
                salesChart.resize();
            });
            api.InformationRecord_GetInformationRecordCitySevenDays().then((res) => {
                const dateList = res.map(function (item) {
                    return item.time;
                });
                const valueList = res.map(function (item) {
                    return item.count;
                });
                var option = {
                    visualMap: [
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 0,
                            min: 0,
                            max: 33,
                        },
                    ],
                    title: [
                        {
                            left: '5%',
                            top: '5%',
                            text: '七天内所有行政区监控药品销售统计',
                            textStyle: {
                                color: '#ddd',
                                fontSize: 14,
                            },
                        },
                    ],
                    textStyle: {
                        color: '#ddd',
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(126,199,255,0)', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.5,
                                            color: 'rgba(126,199,255,1)', // 100% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(126,199,255,0)', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                    },
                    xAxis: {
                        type: 'category',
                        data: dateList,
                        axisLabel: {
                            show: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ddd',
                            },
                        },
                    },
                    yAxis: {
                        name: '次数',
                        splitLine: { show: false },
                        axisLabel: {
                            show: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#ddd',
                            },
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            showSymbol: true,
                            data: valueList,
                            smooth: true,
                            symbolSize: 0,
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: 'rgba(25,163,223,1)', // 线条颜色
                                },
                                borderColor: 'rgba(0,0,0,.4)',
                            },
                            areaStyle: {
                                //区域填充样式
                                normal: {
                                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(25,163,223,.3)',
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(25,163,223, 0)',
                                            },
                                        ],
                                        false
                                    ),
                                    shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
                                    shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                                },
                            },
                        },
                    ],
                };
                salesChart.setOption(option);
            });
        },
    },
};
</script>

<style lang='scss' scoped>
#salesChart {
    width: 100%;
    height: 100%;
}
</style>
